import React, {Component} from 'react';
import {axiosGetFunction} from "../../MyConfig/AppConfig";

class SelfMadeLogicComponentBox extends Component {

    state = {
        logic_component_list: []
    }

    componentDidMount() {
        // 加载自己的组件
        let userIdStr = localStorage.getItem("userInfo:id")
        if (userIdStr){
            axiosGetFunction(
                "/logic_component/mine?user_id="+userIdStr,
                (received_data)=>{
                    console.log("received_data", received_data);
                    this.setState({
                        logic_component_list: received_data.dataList,
                    })
                }
            )
        }
    }

    onDrag = (event, image, item) => {
        // 这里的 image 就是一串 url 字符串
        console.log("onDrag", event, image, item);
        // 需要构造的对象
        let node = {
            name: 'image',
            rect: {
                width: 100,
                height: 100
            },
            image: image,
            isMyReactComponent: true,
            data: {
                props: {
                    inner_name: "",
                    // input_parameters: JSON.parse(item.input_parameters),
                    input_parameter: item.input_parameter,
                    // output_parameters: JSON.parse(item.output_parameters),
                    output_parameter: item.output_parameter,
                    // middle_parameters: JSON.parse(item.middle_parameters),
                    middle_parameter: item.middle_parameter,
                }
            },
        };
        // 将其添加到图画当中；
        event.dataTransfer.setData('Text', JSON.stringify(node));
        console.log("onDrag", event);
    };

    render() {
        let { logic_component_list } = this.state;
        return (
            <div>
                This is Self Made Logic ComponentBox.
                {
                    logic_component_list.map((item)=>(
                        <a
                            key={item.title}
                            title={item.title}
                            draggable
                            href="/#"
                            onDragStart={(ev) => this.onDrag(ev, item.img_url, item)}
                        >
                            <img
                                style={{height: 80, width: 80, margin: '0 1px'}}
                                src={item.img_url}
                                alt="pic"
                            />
                        </a>
                    ))
                }
            </div>
        );
    }

}

export default SelfMadeLogicComponentBox;
